<template>
 <div class="runlist">
     <div class="listtop">
         <div class="listtop-left">
            <div class="header">

            </div>
            <div class="time">
                <span>代排队</span>
                <span style="margin-top:0.1rem">35分钟前</span>
            </div>
         </div>
         <span class="status" style="margin-right:10px">配送中</span>
     </div>
     <ul class="list">
         <li>排队方式：</li>
         <li>排队地址：</li>
         <li>排队时间：</li>
         <li>联系电话：</li>
         <li>顾客地址：</li>
     </ul>
    <div class="mybtn" v-if="qiangbtn">
        <el-button type="success" style="width:50%;height:1rem;font-size:0.4rem">开始抢单</el-button>
    </div>
    <div class="mybtn" v-if="hiddenbtn">
        <el-button type="danger" style="width:50%;height:1rem;font-size:0.4rem">转单</el-button>
        <el-button type="success" style="width:50%;height:1rem;font-size:0.4rem">{{btntext}}</el-button>
    </div>
 </div>
</template>
<script>
export default {
  props: [
    'hiddenbtn',
    'btntext',
    'qiangbtn'
  ],
  data () {
    return {
    }
  }
}
</script>
<style lang="stylus" scoped>
.listtop
  width 100%
  height 1.2rem
  display flex
  justify-content space-between
  padding-left .2rem
  align-items center
  .listtop-left
   width 35%
   display flex
   height 1.2rem
   align-items center
   margin-left 0.26rem
  .time
   display flex
   flex-direction column
   margin-left 0.2rem
  .status
    padding .2rem
    background #12bf80
    border-radius 1rem
    font-size 0.26rem
  .header
     width 1rem
     height 1rem
     border-radius 50%
     background-image url('../assets/images/bg.jpg')
     background-size cover
.list
  padding-left 0.25rem
.list>li
  margin-top 0.2rem
.runlist
  border .02rem solid  #cccccc
  padding 0.2rem
  border-radius 0.2rem
  width 90%
  margin 0 auto
.mybtn
  margin-top 0.5rem
  display flex
  justify-content space-around
</style>
